<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="d1">
    <p>{{msg}}</p>
    <button @click="msg='Hello World'">修改数据</button><br/>
    <button @click="destroy">销毁Vue</button><br/>
    <button @click="msg='Hello Java'">修改数据</button>
</div>
<script>
    new Vue({
        el: "#d1",
        data:{
            msg:"Hello Vue"
        },
        methods:{
            destroy(){
                // 销毁Vue
                this.$destroy();
            }
        },
        beforeCreate:function(){
            console.log("创建之前");
        },
        created:function(){
            console.log("创建完成之后")
        },
        beforeMount:function(){
            console.log("挂载之前");
        },
        mounted:function(){
            console.log("挂载完成之后");
        },
        beforeUpdate:function(){
            console.log("修改之前");
        },
        updated:function(){
            console.log("修改完成之后");
        },
        beforeDestroy(){
            console.log("销毁之前");
        },
        destroyed(){
            console.log("销毁完成之后");
        }
    })
</script>
</body>
</html>